export default {
    state: {
        // 设置菜单
        menu: []
    },
    mutations: {
        // 设置菜单  [用户登录后，从后台返回的菜单，通过此函数赋值给state.menu]
        setMenu(state, value) {
            state.menu = value
            // 保存到缓存中  [sessionStorage关闭浏览器，缓存失效]
            // 注意： 缓存到sessionStorage的时候，需要将state.menu序列化，不然sessionStorage存的事object对象
            sessionStorage.setItem('menu', JSON.stringify(state.menu))
            console.log(state.menu)
        },

        // 清空菜单， [用户退出系统，将菜单清空]
        clearMenu(state) {
            state.menu = []
            // 清空浏览器缓存
            sessionStorage.removeItem('menu')
        },

        // 动态添加菜单  [我们需要传递router路由实例，以为我们要使用router.addRouters去动态添加]
        addMenu(state, router) {
            // 1、判断本地是否有menu缓存
            if (!sessionStorage.getItem('menu')) return

            // 2、从本地浏览器的缓存中获取menu
            let session_menu = JSON.parse(sessionStorage.getItem('menu'))

            // 3、判断session_menu是否存在数据
            if(!session_menu) return

            // 4、避免刷新时，menu数据丢失
            state.menu = session_menu

            // 5、定义一个变量，来存我们的动态路由
            const currentMenu = [
                {
                    path: '/home',
                    name: 'home',
                    component: () => import('../views/Main'),
                    children: []
                }
            ]

            // 6、遍历session_menu
            session_menu.forEach(
                item => {
                    // 判断是否有children
                    if(item.children) {
                        item.children = item.children.map(item => {
                            item.component = () => import(`@/views/${item.url}`)
                            return item
                        })
                        currentMenu[0].children.push(...item.children)
                    }else {
                        item.component = () => import(`@/views/${item.url}`)
                        currentMenu[0].children.push(item)
                    }
                }
            )
            router.addRoutes(currentMenu)
            // 7、动态生成路由
            console.log('session', currentMenu)
        }
    },
    actions: {},
    getters: {}
}
